import './Video.scss'
import { notification } from 'antd'
import { DaHuaCameraPlayback, FlvVideoA01 } from '../../../../Common/Configure/Video'
import { useRef } from 'react'
import { useLongPress, useRequest } from 'ahooks'
import { Http } from '../../../../Common/Api'

export const VideoA01 = ({ data }) => {
    const { uuid: channelUuid, url } = data
    const [api, contextHolder] = notification.useNotification()
    const APIList = { A01: 'posPtzCmd', A02: 'posPtzZoom' }
    const A011 = useRef()
    const A012 = useRef()
    const A013 = useRef()
    const A014 = useRef()
    const A015 = useRef()
    const A016 = useRef()
    const A017 = useRef()
    const A018 = useRef()
    const A019 = useRef()
    const A0110 = useRef()
    const A0111 = useRef()
    const A0112 = useRef()

    const A01List = [
        { uuid: 5, title: '上左移动', ref: A015 },
        { uuid: 1, title: '上仰移动', ref: A011 },
        { uuid: 6, title: '上右移动', ref: A016 },
        { uuid: 3, title: '左转移动', ref: A013 },
        { uuid: 0 },
        { uuid: 4, title: '右转移动', ref: A014 },
        { uuid: 7, title: '下左移动', ref: A017 },
        { uuid: 2, title: '下俯移动', ref: A012 },
        { uuid: 8, title: '下右移动', ref: A018 },
    ]

    const A02List = [
        { uuid: 10, title: '焦距变小', ref: A0110 },
        { uuid: 12, title: '倍率变小', ref: A0112 },
        { uuid: 9, title: '焦距变大', ref: A019 },
        { uuid: 11, title: '倍率变大', ref: A0111 },
    ]

    const { runAsync: START } = useRequest(Http, {
        manual: true,
        onSuccess: () => api.info({ key: 'VideoA01', message: '监控开始移动', duration: 0 }),
    })

    const { runAsync: STOP } = useRequest(Http, {
        manual: true,
        onSuccess: () => api.info({ key: 'VideoA01', message: '监控停止移动' }),
    })

    const onStart = uuid => START({ url: uuid > 8 ? APIList.A02 : APIList.A01, path: [channelUuid, uuid, 1, 1] })
    const onStop = uuid => STOP({ url: uuid > 8 ? APIList.A02 : APIList.A01, path: [channelUuid, uuid, 0, 1] })

    useLongPress(() => onStart(1), A011, { onLongPressEnd: () => onStop(1) })
    useLongPress(() => onStart(2), A012, { onLongPressEnd: () => onStop(2) })
    useLongPress(() => onStart(3), A013, { onLongPressEnd: () => onStop(3) })
    useLongPress(() => onStart(4), A014, { onLongPressEnd: () => onStop(4) })
    useLongPress(() => onStart(5), A015, { onLongPressEnd: () => onStop(5) })
    useLongPress(() => onStart(6), A016, { onLongPressEnd: () => onStop(6) })
    useLongPress(() => onStart(7), A017, { onLongPressEnd: () => onStop(7) })
    useLongPress(() => onStart(8), A018, { onLongPressEnd: () => onStop(8) })
    useLongPress(() => onStart(9), A019, { onLongPressEnd: () => onStop(9) })
    useLongPress(() => onStart(10), A0110, { onLongPressEnd: () => onStop(10) })
    useLongPress(() => onStart(11), A0111, { onLongPressEnd: () => onStop(11) })
    useLongPress(() => onStart(12), A0112, { onLongPressEnd: () => onStop(12) })

    return (
        <div className="VideoA01">
            {contextHolder}
            <DaHuaCameraPlayback data={url} />
            <div className="Options">
                <img src="https://image.ljkjkf.com/intellisiteSystem_TieKe/Common/PanTiltControl.png" alt="" />
                <div className="OptionsA01">
                    {A01List.map(({ uuid, ref }) => (
                        <div key={uuid} ref={ref} />
                    ))}
                </div>
                <div className="OptionsA02">
                    {A02List.map(({ uuid, ref }) => (
                        <div key={uuid} ref={ref} />
                    ))}
                </div>
            </div>
        </div>
    )
}
